let temp_list = {}
$(function () {

    $(".tempValue").on("click", function () {
        if ($("#airTemp").hasClass("tempChoose")) {
            circleData(0)
        } else if ($("#waterTemp").hasClass("tempChoose")) {
            circleData(1)
        }
        $("#tempDiv").modal();
    })
})

function circleData(type) {
    Request.builder()
        .data({stationId: stationId})
        .url(STATION_TEMP_LIST)
        .callback(function (e) {
            if (e.code === "00000") {
                // 功率统计图
                temp_list = e
                drawCircle(e,type)
            } else {
                $(".chart_loading").hide();
                $(".chart_noData").show();
            }
        }).do()
}

function drawCircle(data,type) {
    var name;
    var temp;
    var time = data.stationTempList.map(item=>item.time)
    if (type===0){
        name = "室温"
        temp = data.stationTempList.map(item=>item.airTemp)
    } else if(type === 1){
        name = "水温"
        temp = data.stationTempList.map(item=>item.waterTemp)
    }
    let yHtml = [{
        name: name,
        type: "line",
        barMaxWidth: 20,
        showSymbol: false,
        itemStyle: {
            color: "#0277bd"
        },
        data: temp
    }];
    $(`#colorTips`).html(`<div class="li"><div style="background:#0277bd;"></div>${name}</div>`);

    let myChart = echarts.init(document.getElementById(`temp_chart`));
    let option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var html = `<div style="margin-left:5px;">${params[0].name}</div>`;
                params.map(item => {
                    html += `<div style="display: flex;align-items: center;">
                         <div style="width:10px;height:10px;background-color:${item.color};"></div>
                         <div style="margin-left:5px;">${item.seriesName} : ${item.value}℃</div>
                        </div>`
                })
                return html;
            }
        },
        grid: {left: '55', top: '10', right: '30', bottom: '30'},
        xAxis: {
            boundaryGap: false,
            axisLabel: {
                lineHeight: 20,
                fontSize: 10,
            },
            data: time
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 10 // 设置 Y 轴字体大小
            }
        },
        series: yHtml,
        dataZoom: [
            {
                type: 'slider', // 滑块型 dataZoom 组件
                start: 0,       // 数据窗口范围的起始百分比
                end: 100,       // 数据窗口范围的结束百分比
                filterMode: 'filter', // 过滤模式
                show: false,
                height: 15,     // 设置滑块的高度为10px
                bottom: 14,        // 设置滑块距离顶部的距离
            },
            {
                type: 'inside', // 内置型 dataZoom 组件
                start: 0,
                end: 100,
            }
        ]
    };
    let max = 0;
    temp.map(item => {
        if (max < Number(item)) {
            max = Number(item)
        }
    })
    max = max ? Math.ceil(Math.ceil(max) * 1.2) : 100;
    option.yAxis.max = max;
    option.yAxis.interval = max / 4;

    setTimeout(() => {
        myChart.setOption(option);
        $(`.chart_loading`).hide();
    }, 500)
}